<template>
  <div id="a">
    <div class="test">
      <div class="big-img">
        <div class="btn-play" @click="showVedio">
          <img src="../assets/play.png" alt=""/>
        </div>
        <img v-if="showIsImg" :src="bigImg" alt="">
        <div v-if="showIsVedio" style="position: absolute;top: 0">
          <video width="620" height="250" controls autoplay="autoplay">
            <source
                src="https://gse-oss-pub.oss-cn-shenzhen.aliyuncs.com/upload/video/20220815/ac8a5766e26843dc9a99f838e17cd53a.mp4"
                type="video/mp4"
            />
          </video>
        </div>
      </div>
      <div class="small-loop">
        <div v-for="(item,index) in mediaNews"
             :key="index">
          <img :src="item.url" alt="" @click="showBig(item)">
        </div>
      </div>
    </div>
    <h2>混合</h2>
    <div>
      <div class="autoplay">
        <swiper :options="swiperOption"
                ref="videoSwiper"
                v-if="true">
          <swiper-slide v-for="( item , index ) in mediaNews"
                        :key="index">
            <video v-if="item.type===1"
                   :src="item.url"
                   controls
                   muted
                   @ended="endVideo(index)"
                   class="multimedia"
                   style="height: 300px"
            ></video>
            <img v-else
                 :src="item.url"
                 class="multimedia" alt="">
          </swiper-slide>
<!--          循环指示点-->
          <div class="swiper-pagination"
               v-for="(item,index) in mediaNews"
               :key="index"
               slot="pagination"></div>
        </swiper>
    </div>
  </div>
  </div>
</template>

<script>
//页面引入swiper
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'App',
  components: { swiper, swiperSlide },
  data() {
    return {
      bigImg: '',
      mediaNews: [
        // 1为视频类2为图片类
        {url: require('@/assets/ve1.mp4'), type: 1},
        {url: require('@/assets/ph1.jpg'), type: 2},
        {url: require('@/assets/ph2.jpg'), type: 2},
        {url: require('@/assets/ph3.png'), type: 2}
      ],
      showIsVedio: false,
      showIsImg: true,
      mediaLastIndex: 0,
      swiperOption: {
        autoplay:false,
        speed: 3000,
        loop: true,
        // observer: true,
        // observeParents: true,
        autoplayDisableOnInteraction: false,//用户操作swiper之后，是否禁止autoplay
        allowTouchMove: false,
        pagination: {
          el: '.swiper-pagination',
          clickable: true////此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
        },
//滑动之后回调函数
        // on: {
        //   slideChangeTransitionEnd: () => {
        //     this.slideChangeTransitionEndHandle()
        //   },
        //   slideChangeTransitionStart: () => {
        //     this.slideChangeTransitionStartHandle()
        //   },
        //   //控制第一个slide切换
        //   // init: () => {
        //   //   this.initHandle()
        //   // }
        // }
      },
      initOrNot: false, //mediaNews数据改变的时候确保swiper会init一次
    }
  },
  mounted() {
    this.bigImg = this.mediaNews[1].url
    console.log(this.mediaNews[1].url)
  },
  methods: {
    showBig(val) {
      this.bigImg = val.url
      this.showIsVedio = false
      this.showIsImg = true
    },
    showVedio() {
      this.showIsVedio = !this.showIsVedio
      this.showIsImg = false
    },
    initHandle() {
      let that = this
      // console.log(this.mediaNews)
      setTimeout(function () {
        console.log(that.$refs.videoSwiper)
        let swiper = that.$refs.videoSwiper.swiper
        if (that.mediaNews[0]?.type === 2) {
          that.mediaNewsImgHandle(swiper)
        } else {
          document.getElementsByClassName('multimedia')[0]?.play()
        }
      }, 200)
    },
    mediaNewsImgHandle(swiper) {
      // let that = this
      //刚切换到的activeIndex
      let changePointActiveIndex = swiper.activeIndex
      if (swiper.activeIndex < this.mediaNews.length - 1) {
        setTimeout(function () {
          //要确认changePointActiveIndex是不是还是目前的activeIndex，是的话计时后执行，不是的话不执行
          if (changePointActiveIndex === swiper.activeIndex) {
            swiper.slideNext()
          }
        }, 10000)
      } else {
        setTimeout(function () {
          if (changePointActiveIndex === swiper.activeIndex) {
            swiper.slideTo(0, 0)
          }
        }, 10000)
      }
    },
    slideChangeTransitionStartHandle() {
      // let swiper = this.$refs.videoSwiper.swiper
      if (this.mediaNews[this.mediaLastIndex].type === 1) {
        document.getElementsByClassName('multimedia')[this.mediaLastIndex].currentTime = 0
      }
    },
    slideChangeTransitionEndHandle() {
      // console.log('end..')
      let that = this
      let swiper = that.$refs.videoSwiper.swiper
      if (this.mediaNews[this.mediaLastIndex].type === 1) {
        document.getElementsByClassName('multimedia')[this.mediaLastIndex].pause()
      }
      if (this.mediaNews[swiper.activeIndex].type === 2) {
        this.mediaNewsImgHandle(swiper)
      } else {
        document.getElementsByClassName('multimedia')[swiper.activeIndex].play()
      }

      this.mediaLastIndex = swiper.activeIndex
    },
    endVideo(index) {
      let swiper = this.$refs.videoSwiper.swiper
      if (index === swiper.activeIndex) {
        if (swiper.activeIndex < this.mediaNews.length - 1) {
          swiper.slideNext()
          if (this.mediaNews[swiper.activeIndex].type === 1) {
            document.getElementsByClassName('multimedia')[swiper.activeIndex].play()
          } else {
            this.mediaNewsImgHandle(swiper)
          }
        } else {
          swiper.slideTo(0, 0)
          if (this.mediaNews[swiper.activeIndex].type === 1) {
            document.getElementsByClassName('multimedia')[swiper.activeIndex].play()
          } else {
            this.mediaNewsImgHandle(swiper)
          }
        }
      }
    }
  },
  watch: {
    mediaNews: {
      handler() {
        this.initOrNot = false
        this.$nextTick(() => {
          // this.initOrNot = true
        })
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

<style scoped lang="scss">
#a {
  .test {
    width: 600px;
    height: 400px;
    border: 1px solid #f4f4f4;

    .big-img {
      position: relative;
      width: 600px;
      height: 260px;

      .btn-play {
        position: absolute;
        cursor: pointer;
        top: 50%;
        left: 50%;

        img {
          width: 32px;
          height: 32px;
        }
      }

      img {
        height: 255px;
      }
    }

    .row-img {
      display: flex;
      flex-direction: row;

      .small-swiper {
        //width: 600px;

        //justify-content: space-between;
        //img{
        //  width: 100%;
        //}
      }
    }

    .small-loop {
      display: flex;
    }

  }
  .autoplay{
    width: 400px;
    height: 400px;
    border: 1px solid #333333;
  }
}
</style>
